<template>
    <div id="app" v-loading="loading">
        <div class="title">
            管理员账号<el-button class="f1" @click="handleAdd">添加管理员</el-button>
        </div>
        <el-table :data="tableData" border>
            <el-table-column prop="login_name" label="账号" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="qq" label="QQ号码" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="date_created" label="注册时间" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="last_login" label="最后操作时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{
                        scope.row.last_login ? countTrialDate(scope.row.last_login) : '-'
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="last_ip" label="操作IP" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="tableBtn">
                        <template v-if="scope.row.able_change">
                            <a class="blue" @click="handleEdit(scope.$index)">
                                修改
                            </a>
                        </template>
                        <template v-if="scope.row.is_super">
                            <a class="blue" @click="handleDelete(scope.$index)">
                                删除
                            </a>
                        </template>
                        <template v-if="!scope.row.able_change && !scope.row.is_super">-</template>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination layout="prev, pager, next,total"
                :total="listNums" :page-size="10"
                :current-page.sync="curPage"
                @current-change="changePage"    
            >
            </el-pagination>
        </div>
        <el-dialog title="提示" :visible.sync="handleShow"  width="500px">
            <el-form label-position="top">
                <el-form-item label="账号">
                    <el-input v-model="curUser.account"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="curUser.pasd"></el-input>
                </el-form-item>
                <el-form-item label="QQ">
                    <el-input v-model="curUser.qq"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="curUser.phone"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelPop">取 消</el-button>
                <el-button type="primary" @click="handleAccount"
                    :loading="afirmBtnLoad"
                >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import SetAdmin from './index.js';
    export default SetAdmin;
</script>
<style lang="scss" scoped>
    .title{
        margin-bottom:25px;
        font-size:21px;
        margin-top:65px;
    }
    .f1{
        float:right;
        margin-top:-10px;
    }
    .blue{
        cursor: pointer;
    }
</style>